<!DOCTYPE html>
<html>
<head>
	
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>Edit time off</title>
	<link rel="icon" type="image/gif" href="/assets/img/favicon.gif">
	<link rel="icon" sizes="196x196" href="/assets/img/casey-icon-196.png">
	<link rel="icon" sizes="128x128" href="/assets/img/casey-icon-128.png">
	<link rel="apple-touch-icon" sizes="128x128" href="/assets/img/casey-icon-128.png">
	<link rel="apple-touch-icon-precomposed" sizes="128x128" href="/assets/img/casey-icon-128.png">
	<!-- style sheets -->
	<link href='//fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="assets/css/timeoff-proto-primary.css" type="text/css" media="screen" charset="utf-8">	
</head>
<body>

<div id="app-wrapper" class="">

	<!-- LEFT SIDE CONTENT SECTION -->
	<div id="left-panel" class="">
		
		<div id="profile">
			<div id="circle">
				<img src="https://teams-service.googleplex.com/photos/" alt="Your photo">
			</div>
			<div id="ldap">yourname@google.com</div>
		</div>
		
				<nav class="">
		
		<!-- top navigation -->
		<ul class="primary-sitenav">
			<li>
				<a href="home.html" class="selected" title="Your time off">
					<span class="icon icon-time-off"></span>
					<span class="list-description">Your time off</span>
				</a>
			</li>
			<li>
				<a href="holidays.html" class="" title="Google holidays">
					<span class="icon icon-calendar"></span>
					<span class="list-description">Google holidays</span>
				</a>
			</li>
			<li>
				<a href="https://goto.google.com/vacationpolicy" target="_blank" class="" title="Vacation policy">
					<span class="icon icon-policy"></span>
					<span class="list-description">Vacation policy</span>
				</a>
			</li>

		</ul>
		
		<!-- bottom navigation -->			
		<ul class="secondary-sitenav">
			<li>
				<a href="" class="" title="How to use this app">
					<span class="icon icon-help"></span>
					<span class="list-description">Get help</span>
				</a>
			</li>
			<li>
				<a href="" class="" title="Give feedback on this app">
					<span class="icon icon-feedback"></span>
					<span class="list-description">Give feedback</span>
				</a>
			</li>
		</ul>
		
		<!-- site version indicator -->
			<a class="version-indicator" href="index.html" title="Learn more about this version of the Time Off Machine">
				<span class="icon icon-dogfood"></span>
				<span class="list-description">BARK! CSS Prototype</span>
			</a>
			
		</nav>

		
	</div><!-- end side navigation -->
	
	
	<!-- MAIN CONTENT SECTION -->
	<div id="main-panel">
	
		<!-- FIXED TOP BAR -->
		<div id="app-bar" class="app-bar app-bar-centered">
			
			<div class="column-main">
				<!-- APP BAR LEFT CONTENT -->
				<div class="app-bar-content left">
					<a class="button button-appbar-icon button-back" title="Back to time off list" href="home.html" tabindex="52"></a>
					<h1 class="app-bar-title">Past time off</h1>
				</div>
				
				<div class="app-bar-content right">
					<a class="button button-appbar button-flat mobile-only" title="Request an edit"href="home.html" tabindex="53">Request edit</a>
				</div>
			
			</div>			
		</div> <!-- end APPBAR container -->


		<!-- MAIN CONTENT SUB-SECTIONS -->
		<div class="column-main" role="main">
			
			<ul class="page-sections variable-topmargin">
				
				<!-- TIME OFF LIST 'UPCOMING' -->
				<li class="page-section-item">
					
					<!-- NEW TIME OFF CARD -->
					<div class="card card-for-inputs read-only-card">
							<section class="form-section status-container">
						
								<span class="statusitem-icon-container">
									<div class="time-type-icon time-type-vacation taken" title="Status: Already taken"></div>
								</span>
								
								<span class="statusitem-desc-container">
									<div class="listitem-desc-primary">Already taken</div>
									<div class="listitem-desc-secondary">-4.00 hours of time off</div>
								</span>
								
							</section>
							<section class="form-section">
								<div class="input-container">
									<label for="time-type" >Time off type</label>
									<div class="read-only title">Vacation</div>
								</div>
							</section>
							
							<section class="form-section">
								<div class="input-container date-container input-container-half left">
									<label for="start-date">Start date</label>
									<div class="read-only">Fri, Jun 14, 2012</div>
								</div>
							
								<div class="input-container date-container input-container-half right">
									<label for="end-date">End date</label>
									<div class="read-only">Fri, Jun 14, 2012</div>
								</div>
							</section>
							
							<section class="form-section">
								<div class="input-container">
									<label for="end-date">Half day?</label>
									<div class="read-only">Yes</div>
								</div>
							</section>
							
							<section class="form-section">
								<div class="input-container">
									<label for="comment">Comment (optional)</label>
									<div class="read-only">My vacation is only 4 hours long. I'm committed to my job.</div>
								</div>
							</section>
							
							<section class="form-section desktop-only">
								<div class="card-button-container right">
									<a class="button button-flat" href="home.html" tabindex="11">Request edit</a>
								</div>
							</section>
						
					</div> <!-- end list card -->
						
				</li> <!-- end page section item -->
				
			</ul> <!-- end page sections -->
		
		</div><!-- end column main -->

		
	</div> <!-- end 'primary content' section -->
	
</div><!-- end app wrapper -->

<!-- JAVASCRIPT -->
<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>

</body>
</html>